<template>
    <section class="do-project">
        <div v-for="i in movieList" :key="i.id">
            <div class="top" v-if="i.top===2" >
                <div class="top-top">
                    <img :src="i.userImg" alt="" class="usrImg" >
                    <p>{{i.text}}</p>
                    <div class="Content-list">
                        <div class="Content-list-icon"><Icon type="ios-eye" size="25" class="icon" /> <span>{{i.syes}}</span></div>
                        <div class="Content-list-icon"><Icon type="md-images" size="20" class="icom icon"/> <span>{{i.imgNum}}</span></div>
                        <div class="Content-list-icon"><Icon type="md-thumbs-up" size="20" class="icom icon"/> <span>{{i.zan}}</span></div>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <div class="cricle-img">
                    <ul>
                        <li v-for="(y,index) in i.img"  :key='index'>
                            <img :src="y" alt="">
                        </li>
                    </ul>
                    <div style="clear: both"></div>
                </div>
                <div class="Content-list-zan">
                    <span><Icon type="ios-pricetags"  size="20" style="margin-right: 10px"/>术后当自强   鼻部   孝感同城   重庆同城   鼻部综合   手术延长鼻小柱   鼻小柱   自体软骨垫鼻尖   鼻头整形   硅胶隆鼻 隆鼻</span>
                    <div class=" time">{{i.time}}</div>
                </div>
                <div style="clear: both"></div>
            </div>
        </div>
    </section>
</template>

<script>
    export default {
        name: "Doproject",
        props:["movieList"],
        data () {
            return {
                item : null
            }
        },
        methods: {

        }
    }
</script>

<style scoped lang="less">
    @import "../../style/style.less";
    .do-project{
        margin-bottom: 50px;
        >div:hover{
            cursor: pointer;
        }
        >div{
            padding-top: 10px;
            padding-bottom: 5px;
            border-bottom: 1px solid #e3e3e3;
            .usrImg{
                width: 49px;
                height: 49px;
                border-radius: 50%;
                float: left;
                margin-right: 10px;
                cursor:pointer;
            }
        }
        >:last-child{
            border: none;
        }
        .top{
            position: relative;
            .top-top{
                margin-bottom: 10px;
                >p{
                    height: 38px;
                    width:500px;
                    overflow: hidden;
                    line-height: 38px;
                    margin-bottom: 10px;
                    font-size: 15px;
                    color: #666666;
                    float: left;
                    padding-top: 5px;

                }
                .Content-list{
                    float: right;
                    width: 280px;
                    margin-top: 8px;
                    .Content-list-icon{
                        width: 70px;
                        height: 30px;
                        line-height: 30px;
                        float: left;
                        margin-left: 22px;
                        span{
                            padding-left: 8px;
                            color: #999999;
                        }
                        .icom{
                            margin-top: -4px;
                        }
                        .icon{
                            color: #999999;
                        }

                    }
                }

            }
        }
        .cricle-img{
            margin-top: 10px;
            margin-left: 65px;
            li{
                float: left;
                margin-right: 18px;
                margin-bottom: 10px;
            }
            img{
                width: 52px;
                height: 78px;
            }
        }


            .time{
                float: right;
                color: #999999;
                width: 150px;
            }
            .Content-list:hover {
                border-bottom: none;
                background-color: #ffffff;
            }
        .Content-list-zan{
            color: @theme-color-dark;
        }
    }

</style>